import 'css/prism.css'
import 'katex/dist/katex.css'

import { notFound } from 'next/navigation'
import Link from '@/components/Link'
import ScrollTopAndComment from '@/components/ScrollTopAndComment'
import { getWpBlogById } from '../utils'

// 导出dynamic属性，强制页面动态渲染
export const dynamic = 'force-dynamic'

interface PageProps {
  searchParams: Promise<{ id?: string }>
}

export default async function WpBlogDetailPage({ searchParams }: PageProps) {
  const params = await searchParams
  const id = params.id

  // 如果没有id参数，显示提示信息
  if (!id) {
    return <div className="text-center py-10">请提供文章ID</div>
  }

  // 服务端获取文章数据
  let blog
  try {
    blog = await getWpBlogById(id)
  } catch (error) {
    console.error('获取文章失败:', error)
    return (
      <div className="text-center py-10 text-red-500">
        获取文章失败: {error instanceof Error ? error.message : '未知错误'}
      </div>
    )
  }

  // 文章不存在
  if (!blog) {
    notFound()
  }

  // HTML 已在服务端处理完成（包括代码高亮），直接使用
  const processedHtml = blog.post_content || ''

  return (
    <article className="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">
      <ScrollTopAndComment />
      <div className="pt-2 pb-2">
        <div className="space-y-1 text-center">
          <dl className="space-y-10">
            <div>
              <dt className="sr-only">发布时间</dt>
              <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
                <time dateTime={blog.post_date}>
                  {new Date(blog.post_date).toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                  })}
                </time>
              </dd>
            </div>
          </dl>
          
          <div>
            <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
              {blog.post_title}
            </h1>
          </div>
        </div>
      </div>

      <div className="prose max-w-none pt-2 pb-3 dark:prose-invert">
        <div 
          className="blog-content"
          dangerouslySetInnerHTML={{ __html: processedHtml }}
        />
      </div>

      <div className="pt-4 pb-6 text-sm text-gray-700 dark:text-gray-300">
        <Link
          href="/wp"
          className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
        >
          ← 返回博客列表
        </Link>
      </div>
    </article>
  )
}